<!--摄像头配置——talbe-->
<template>
  <el-form
    :model="tableData"
    ref="tableData"
    :inline="true"
    label-width="100px"
    :rules="handleFormRules"
    style="margin-left: 30px"
  >
    <el-table
      class="m-top10 table-item"
      ref="table"
      :data="tableData"
      highlight-current-row
      style="width: 100%">
      <el-table-column
        label="排序"
        type="index"
        width="100"
        align="center">
        <template slot-scope="scope">
          <el-form-item
            :prop="scope.$index + '.sort'"
            :rules="handleFormRules.sort"
            size="mini"
          >
            <el-input class="inputCenter" v-model="scope.row.sort"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        label="名称"
        align="center">
        <template slot-scope="scope">
          <el-form-item
            size="mini"
          >
            <!--             readonly-->
            <el-input class="inputCenter" v-model="scope.row.displayName"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <!--时长5-10s下拉框-->
      <el-table-column
        label="每个素材时长(秒)"
        align="center">
        <template slot-scope="scope">

          <el-form-item
            :prop="scope.$index + '.materialDuration'"
            :rules="handleFormRules.materialDuration"
            size="mini"
          >
            <el-select
              clearable
              class="ele-block inputCenter"
              v-model="scope.row.materialDuration"
              placeholder="请选择每个素材时长(秒)"
            >
              <el-option label="5s" :value="5" />
              <el-option label="6s" :value="6" />
              <el-option label="7s" :value="7" />
              <el-option label="8s" :value="8" />
              <el-option label="9s" :value="9" />
              <el-option label="10s" :value="10" />
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>

      <el-table-column
        label="采集素材总数量"
        align="center">
        <template slot-scope="scope">
          <el-form-item
            class="delInput"
            :prop="scope.$index + '.collectionQuantity'"
            :rules="handleFormRules.collectionQuantity"
            size="mini"
          >
            <el-input type="number" @input="inputClick(scope.row.collectionQuantity,scope.$index)"
                      class="inputCenter" v-model.number="scope.row.collectionQuantity"
                      placeholder="请输入采集素材总数量"></el-input>
          </el-form-item>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <div class="red pointer" @click="deleteRow(scope.$index, tableData)">删除</div>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script>
  import {queryOemPoint} from "@/api/lncomingManagement/cameraManage";

  export default {
    name: "camera-set",
    computed: {
      // 计算‘全程解说’时长——（摄像头配置，每个素材时长集合++）
      maxNum() {
        let maxNum = 0;
        let time=0
        if(this.tableData.length>0){
          for(let i=0;i<this.tableData.length;i++){
            let num = this.tableData[i].mulitpleList ? Number(this.tableData[i].mulitpleList) : 10
            time+=num
          }
        }
        // 1800为半小时的秒数
        let seconds = 1800
        console.log("this.timeLength===============",this.timeLength,seconds*this.timeLength,'time',time)
        maxNum=Math.floor((seconds*this.timeLength)/time)
        return maxNum;
      },
      // 使用总点数
      allDianShu(){
        let allDianShu = 0
        let allNum=0
        if(this.tableData.length>0){
          for(let i=0;i<this.tableData.length;i++){
            let num = this.tableData[i].collectionQuantity ? Number(this.tableData[i].collectionQuantity) : 0
            allNum+=num  // 采集素材总数量
          }
        }
        console.log("allNum",allNum)
        // this.oemPoint=1  // 代理点数
        allDianShu=allNum * this.oemPoint
        return allDianShu;
      }
    },
    data(){
      return{
        oemPoint:0,
        timeLength:1,
        tableData: [],
        //定义的表格数据
        handleFormRules: {
          sort: [
            {
              required: true,
              message: '请输入排序',
              trigger: 'change',
            },
          ],
          materialDuration: [
            {
              required: true,
              message: '请选择每个素材时长(秒)',
              trigger: 'change',
            },
          ],
          collectionQuantity: [
            {
              required: true,
              message: '请输入采集素材总数量',
              trigger: 'change',
            },
          ],
        },
      }
    },
    methods:{
      timeCount(e){
        this.timeLength=e.length  // 选择的时间段总数
      },
      // 输入采集素材总数量 Click
      inputClick(e,index){
        if(e<=0){
          this.tableData[index].collectionQuantity=0;
        }
        console.log("e>=this.maxNum",e>=this.maxNum,'e',e,'this.maxNum',this.maxNum)
        if(e>=this.maxNum)
        {
          this.tableData[index].collectionQuantity=this.maxNum;
        }
        for(let i=0;i<this.tableData.length;i++){
          this.$set(this.tableData[i],'collectionQuantity',this.tableData[index].collectionQuantity)
        }
        console.log("输入采集素材总数量this.tableData======",this.tableData)
        this.$emit('allDianShu',this.allDianShu,this.tableData[index].collectionQuantity,this.oemPoint)
      },
      show(e){
        this.tableData=e

        // 查询oem，发布视频点数
        queryOemPoint({
          id: this.$store.state.user.info.merchantId
        }).then((data) => {
          console.log('发布频点数data',data)
          this.oemPoint=data.releaseVideos
        })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      // 删除选中行
      deleteRow(index, rows) {
        // 表单删除对应列
        // 先返回值，再删除
        let id=rows[index].id
        rows.splice(index, 1);
        this.$emit('getListIds',id,rows,1)
        console.log('tableData---------del',this.tableData,'rows',rows)
      },

      //  确认提交
      confirm(){
        this.$refs.tableData.validate((valid) => {
          if (valid) {
            console.log('子组件成功可以拿到的数据', this.tableData)
            let id=0
            if(this.tableData.length>0){
              this.$emit('getListIds',id,this.tableData,2)
            }else{
              this.$emit('getListIds',id,this.tableData,1)
            }
          }
          else{
            //  校检失败
            // this.$emit('confirm','请输入摄像头配置内容')
          }
        })
      },
    }
  }
</script>

<style scoped>

</style>
